<template>
	<view class="nucleic-record-container">
		<!-- 核酸预约记录列表 -->
		<view class="record-list">
			<view 
				class="record-item" 
				v-for="(item, index) in recordList" 
				:key="index"
				@click="viewDetail(item)"
			>
				<view class="record-icon">
					<text class="icon">📄</text>
				</view>
				<view class="record-content">
					<text class="record-title">{{ item.title }}</text>
					<text class="record-time">{{ item.time }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
			data() {
			return {
				recordList: [
					{
						title: '预约详情',
						time: '2020-12-30 09:30',
						status: 'success',
						id: '1'
					},
					{
						title: '预约详情',
						time: '2020-12-25 14:00',
						status: 'completed',
						id: '2'
					},
					{
						title: '核酸检测报告',
						time: '2020-12-30 10:00',
						status: 'completed',
						id: '3'
					}
				]
			}
		},
	methods: {
		viewDetail(item) {
			if (item.title === '核酸检测报告') {
				uni.navigateTo({
					url: `/pages/nucleic/report?data=${encodeURIComponent(JSON.stringify(item))}`
				})
			} else {
				uni.navigateTo({
					url: `/pages/nucleic/detail?data=${encodeURIComponent(JSON.stringify(item))}`
				})
			}
		}
	}
}
</script>

<style scoped>
.nucleic-record-container {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding: 20rpx;
}

.record-list {
	background-color: #ffffff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.record-item {
	display: flex;
	align-items: center;
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
	transition: background-color 0.2s ease;
}

.record-item:last-child {
	border-bottom: none;
}

.record-item:active {
	background-color: #f8f9fa;
}

.record-icon {
	width: 40rpx;
	height: 40rpx;
	background-color: #87CEEB;
	border-radius: 50%;
	margin-right: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.icon {
	font-size: 20rpx;
}

.record-content {
	flex: 1;
}

.record-title {
	font-size: 30rpx;
	color: #333;
	display: block;
	margin-bottom: 8rpx;
}

.record-time {
	font-size: 26rpx;
	color: #999;
}
</style> 